import React from 'react';

import { setDocumentTitle } from  '../../components/utils';

import {Row, Col} from '../../../../components/grid/Grid.jsx';
import { ButtonGroup, Button } from '../../../../components/button/Button.jsx';
import { Input, Select, Textarea, Radio, Checkbox, FormItem, FormGroup } from '../../../../components/form/Form.jsx';

export default class FormPage extends React.Component{
  constructor(props){
    super(props);
    setDocumentTitle('Form');
    this.state = {
      layout: 'horizontal',
      layoutDom: [{
        layout: 'horizontal',
        isActive: true
      }, {
        layout: 'vertical',
        isActive: false
      }, {
        layout: 'inline',
        isActive: false
      }]
    }

    this.change = this.change.bind(this);
    this.onClick = this.onClick.bind(this);
  }
  change(props, e) {
    this.setState({
      [props.name]: props.value
    })
  }
  onClick(props){
    let { layoutDom, layout } = this.state,
      activeItem = layoutDom.find(item=>item.isActive),
      currentItem = layoutDom.find(item=>item.layout == props.layout);
    activeItem.isActive = false;
    currentItem.isActive = true;
    layout = currentItem.layout;

    this.setState({layoutDom, layout})
  }
  render(){
    let { input, layoutDom, layout } = this.state;
    return <div className={'form-page'}>
      <ul className={'page-explain'}>
        <li>form 默认横向排版（layout="horizontal"）</li>
        <li>layout="horizontal/vertical/inline"</li>
      </ul>
      <div className='layout-group'>
        <ButtonGroup type={'primary-hollow'} onClick={this.onClick} activeType={'primary'}>
          {
            layoutDom.map((item, key)=>{
              return <Button key={key} {...item}>{item.layout}</Button>
            })
          }
        </ButtonGroup>

        <h2>FormItem {layout}</h2>
        <FormGroup layout={layout} span={21} required>
          <FormItem
            label={'label1'}
            formType={'input'}
            explain={'description description description description description description description description description description'}
            errorInfo={'error info error info error info error info '}
            hasError
          />
          <FormItem
            label={'label3'}
            formType={'input'}
            explain={'description'}
            errorInfo={'errorInfo'}
            disabled
            value={'label3'}
            required={false}
            readOnly
          />
          <FormItem
            label={'label5'}
            formType={'textarea'}
            explain={'description'}
            errorInfo={'errorInfo'}
            width={layout == 'inline' ? '200px' : ''}
          />
          <FormItem
            label={'label2'}
            formType={'select'}
            explain={'description'}
            errorInfo={'errorInfo'}
            options={[{value: 1, text: 'label5 label5 label5'}]}
            disabled
          />
          <FormItem
            label={'label4'}
            formType={'select'}
            explain={'description'}
            errorInfo={'errorInfo'}
            options={[{value: 1, text: 1}]}
          />
          <FormItem
            label={'label6'}
            formType={'radio'}
            explain={'description'}
            errorInfo={'errorInfo'}
            value={1}
            checkedValues={1}
          />
          <FormItem
            label={'label6'}
            formType={'radios'}
            explain={'description'}
            errorInfo={'errorInfo'}
            name={'label6'}
            checkedValues={2}
            radios={[{label: 'test1', value: '1'}, {label: 'test2', value: '2'}, {label: 'test3', value: '3'}, {label: 'test3', value: '3'}, {label: 'test3', value: '3'}, {label: 'test3', value: '3'}, {label: 'test3', value: '3'}, {label: 'test3', value: '3'}, {label: 'test3', value: '3'}, {label: 'test3', value: '3'}, {label: 'test3', value: '3'}, {label: 'test3', value: '3'}, {label: 'test3', value: '3'}, {label: 'test3', value: '3'}, {label: 'test3', value: '3'}, {label: 'test3', value: '3'}, {label: 'test3', value: '3'}, {label: 'test3', value: '3'}, {label: 'test3', value: '3'}, {label: 'test3', value: '3'}]}
          />
          <FormItem
            label={'label6'}
            formType={'checkbox'}
            explain={'description'}
            errorInfo={'errorInfo'}
          />
          <FormItem
            label={'label6'}
            formType={'checkboxs'}
            explain={'description'}
            errorInfo={'errorInfo'}
            checkedValues={[1,2]}
            checkboxs={[{label: 'test1', value: '1'}, {label: 'test2', value: '2'}, {label: 'test3', value: '3'}, {label: 'test3', value: '3'}, {label: 'test3', value: '3'}, {label: 'test3', value: '3'}, {label: 'test3', value: '3'}, {label: 'test3', value: '3'}, {label: 'test3', value: '3'}, {label: 'test3', value: '3'}, {label: 'test3', value: '3'}, {label: 'test3', value: '3'}, {label: 'test3', value: '3'}, {label: 'test3', value: '3'}, {label: 'test3', value: '3'}, {label: 'test3', value: '3'}, {label: 'test3', value: '3'}, {label: 'test3', value: '3'}, {label: 'test3', value: '3'}, {label: 'test3', value: '3'}]}
          />
        </FormGroup>
      </div>

      <h2>单个form元素</h2>
      <Input className={'bee-input'} onChange={this.change} placeholder={'placeholder'} name='input' value={input ? input : ''} />
      <Input className={'bee-input'} onChange={this.change} disabled={true}/>
      <Select className={'bee-input'} options={[{value: 1, text: 1}]} onChange={this.change} value={1}>
        <option>请选择</option>
      </Select>
      <Select className={'bee-input'} options={[{value: 1, text: 1}]} onChange={this.change} value={1} disabled={true}>
        <option>请选择</option>
      </Select>
      <Textarea className={'bee-textarea'} name={'test'} value={'aaaaa'} resize={'none'} required />
      <Textarea className={'bee-textarea'} name={'test'} value={'aaaaa'} resize={'none'} disabled={true} />
      <div style={{paddingTop: '10px'}}>
        <Radio label={'text'} />
        <Radio label={'aaaa'} />
      </div>

      <div style={{paddingTop: '10px'}}>
        <Checkbox label={'text'} />
        <Checkbox label={'aaaa'} />
      </div>
    </div>
  }
}